<template>
  <div class="my-container">
    <!-- 顶部 -->
    <div class="top-box" v-if="userInfo">
      <div class="user-box">
        <div class="info-box">
          <span>{{ this.userInfo && this.userInfo.nickname }}</span>
          <span>{{ this.userInfo && this.userInfo.intro }}</span>
        </div>
        <img
          @click="$router.push('/info')"
          :src="this.userInfo && this.userInfo.avatar"
          alt=""
        />
      </div>
      <!-- 统计数据 -->
      <div class="data-box">
        <div class="item">
          <span class="num">{{ userInfo.submitNum }}</span>
          <span>累计答题</span>
        </div>
        <div class="item">
          <span class="num">{{ userInfo.collectQuestions.length }}</span>
          <span>收藏题目</span>
        </div>
        <div class="item">
          <span class="num">{{ userInfo.errorQuestions.length }}</span>
          <span>我的错题</span>
        </div>
        <div class="item">
          <span class="num">{{ rightPercent }}</span>
          <span>正确率</span>
        </div>
      </div>
    </div>
    <!-- 主体内容区域 -->
    <div class="main-box" v-if="userInfo">
      <!-- 顶部的脱标cell -->
      <van-cell
        @click="$router.push('/editInfo?property=position')"
        class="job-cell my-cell"
        title="我的岗位"
        :value="userInfo.position"
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <i class="iconfont iconicon_mine_gangwei"></i>
        </template>
        <template #right-icon>
          <i class="iconfont iconicon_more"></i>
        </template>
      </van-cell>
      <!-- 中间的面经数据 -->
      <div class="experience-box">
        <div class="title">面经数据</div>
        <div class="chart-items">
          <div class="item">
            <div class="top">
              昨日阅读 <span>+{{ userInfo.shareData.read.yesterday }}</span>
            </div>
            <div class="num">{{ userInfo.shareData.read.total }}</div>
            <div class="bottom">阅读总数</div>
          </div>
          <div class="item">
            <div class="top">
              昨日获赞<span>+{{ userInfo.shareData.star.yesterday }}</span>
            </div>
            <div class="num">{{ userInfo.shareData.star.total }}</div>
            <div class="bottom">获赞总数</div>
          </div>
          <div class="item">
            <div class="top">
              昨日新增<span>+{{ userInfo.shareData.comment.yesterday }}</span>
            </div>
            <div class="num">{{ userInfo.shareData.comment.total }}</div>
            <div class="bottom">评论总数</div>
          </div>
        </div>
      </div>
      <!-- 底部的cell -->
      <van-cell-group>
        <van-cell
          :border="false"
          class=" my-cell"
          title="我的面经分享"
          value="21"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #icon>
            <i class="iconfont iconicon_mine_mianjing"></i>
          </template>
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
        <van-cell
          :border="false"
          class=" my-cell"
          @click="$router.push('/message')"
          title="我的消息"
          value="98"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #icon>
            <i class="iconfont iconicon_mine_xiaoxi"></i>
          </template>
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
        <van-cell
          :border="false"
          class=" my-cell"
          title="收藏的题库"
          value="29"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #icon>
            <i class="iconfont iconicon_mine_tikushoucang"></i>
          </template>
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
        <van-cell
          :border="false"
          class=" my-cell"
          title="收藏的企业"
          value="32"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #icon>
            <i class="iconfont iconicon_mine_qiyeshoucang"></i>
          </template>
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
        <van-cell :border="false" class=" my-cell" title="我的错题" value="123">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #icon>
            <i class="iconfont iconicon_mine_cuoti"></i>
          </template>
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
// map 辅助函数
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'my',
  async activated () {
    // 通过vuex的action获取用户信息
    await this.getUserInfo()
  },
  methods: {
    // 通过辅助函数合并 vuex中的mutations
    ...mapMutations(['SETUSERINFO']),
    // 通过辅助函数合并 vuex中的 action
    ...mapActions(['getUserInfo'])
  },
  computed: {
    ...mapState(['userInfo']),
    // 正确率计算
    rightPercent () {
      if (this.userInfo.submitNum === 0) {
        return '0%'
      } else {
        return (
          parseInt(
            ((this.userInfo.submitNum - this.userInfo.errorNum) /
              this.userInfo.submitNum) *
              100
          ) + '%'
        )
      }
    }
  }
}
</script>

<style lang="less">
.my-container {
  .top-box {
    height: 216px;
    background: linear-gradient(#ce0031, #b8002c);
    .user-box {
      display: flex;
      justify-content: space-between;
      padding-top: 31px;
      align-items: center;
      padding-left: 15px;
      padding-right: 37px;
      .info-box {
        span {
          color: white;
          display: block;
          &:first-child {
            font-size: 21px;
            font-weight: 600;
          }
          &:last-child {
            font-size: 12px;
            opacity: 0.7;
            margin-top: 6px;
          }
        }
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid #c7697e;
      }
    }
    .data-box {
      margin-top: 29px;
      display: flex;
      justify-content: space-around;
      color: white;
      span {
        display: block;
        text-align: center;
      }
      .num {
        font-size: 21px;
        font-weight: 600;
        display: block;
      }
      span:last-child {
        margin-top: 6px;
        opacity: 0.7;
        font-size: 12px;
      }
    }
  }
  .main-box {
    padding: 26px 15px;
    position: relative;
    .my-cell {
      height: 55px;
      align-items: center;
      .iconfont:first-child {
        font-size: 22px;
        margin-right: 12px;
      }
      .iconfont:last-child {
        font-size: 10px;
        margin-left: 9px;
        color: #5b5d75;
      }
    }
    .job-cell {
      position: absolute;
      top: -39px;
      width: 345px;
      border-radius: 8px;
    }
    .van-cell-group {
      border-radius: 8px;
      overflow: hidden;
    }
    .experience-box {
      height: 143px;
      padding: 19px 15px 0;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 10px;
      .title {
        font-size: 14px;
        font-weight: 600;
      }
      .chart-items {
        margin-top: 18px;
        display: flex;
        justify-content: space-around;
        .item {
          text-align: center;
        }
        .top {
          font-size: 10px;
          color: #b4b4bd;
          span {
            color: #53b5d1;
          }
        }
        .num {
          font-size: 21px;
          font-weight: 700;
          margin-top: 9px;
        }
        .bottom {
          font-size: 12px;
          color: #545671;
          margin-top: 6px;
        }
      }
    }
  }
}
</style>
